<template>
  <div id="money-operat">
    <div>
      <a-spin :spinning="loading">
        <a-form :form="form" @submit="handleSubmit">
          <a-form-item v-bind="formItemLayout" label="金额">
            <a-input-number
              v-decorator="formData.money"
              :step="0.01"
              :min="0"
              style="width:100%"
              :formatter="
                value => ` ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
              "
              :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
            ></a-input-number>
          </a-form-item>
          <a-form-item
            v-bind="formItemLayout"
            label="分类"
            :loading="typeLoading"
          >
            <a-select :loading="loading" v-decorator="formData.type">
              <a-select-option
                :key="key"
                :value="item.value"
                v-for="(item, key) in mapType"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="产生日期">
            <a-date-picker
              v-decorator="formData.generated_at"
              style="width:100%"
              format="YYYY-MM-DD HH:mm:ss"
              :disabledDate="disabledDate"
              :showTime="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="备注">
            <a-textarea
              v-decorator="formData.desc"
              placehoder="这里是备注..."
              :autosize="{
                minRows: 2,
                maxRows: 6
              }"
            ></a-textarea>
          </a-form-item>
          <a-form-item v-bind="tailFormItemLayout">
            <a-button type="primary" html-type="submit" :loading="loading">
              确定
            </a-button>
          </a-form-item>
        </a-form>
      </a-spin>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { fetchType, createFinance } from "@/api/finance";
export default {
  props: {
    model: {
      default: ""
    }
  },
  data() {
    return {
      loading: false,
      typeLoading: true,
      mapType: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 8
          }
        }
      },
      formData: {
        money: [
          "money",
          {
            rules: [
              {
                required: true,
                message: "请输入金额"
              }
            ]
          }
        ],
        type: [
          "type",
          {
            rules: [
              {
                required: true,
                message: "请选择分类"
              }
            ]
          }
        ],
        generated_at: [
          "generated_at",
          {
            rules: [
              {
                type: "object",
                required: true,
                message: "请选择日期"
              }
            ],
            initialValue: moment()
          }
        ],
        desc: ["desc", {}]
      }
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  created() {
    this.fetchType();
  },
  methods: {
    moment,
    disabledDate(current) {
      return current && current > moment().endOf("day");
    },

    fetchType() {
      fetchType().then(res => {
        this.typeLoading = false;
        if (res.code === 1) {
          this.mapType = res.data;
        }
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.loading = true;
          const postData = {
            money: values.money,
            type: values.type,
            generated_at: values.generated_at.format("YYYY-MM-DD HH:mm:ss"),
            desc: values.desc || ""
          };
          createFinance(postData)
            .then(res => {
              this.loading = false;
              this.$emit("success", res);
            })
            .catch(error => {
              this.loading = false;
              this.$common.validateExtend(error, this.form);
            });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
#money-operat {
  .operat-button {
    text-align: center;
    margin-bottom: 16px;
  }
}
</style>
